<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Datetime Test</title>
</head>
<body>
  <div id="app">
    时间：{{ date | formatDate }}
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    // 在月份、日期、小时等小于10时前面补0
    var padDate = function(value){
      return value < 10 ? '0' + value : value;
    };

    var app = new Vue({
      el: '#app',
      data: {
        date: new Date()
      },
      filters: {
        // 这里的value就是需要过滤的数据
        formatDate: function(value){
          var date = new Date(value);
          var year = date.getFullYear();
          var mouth = padDate(date.getMonth()+1);
          var day = padDate(date.getDate());
          var hours = padDate(date.getHours());
          var minutes = padDate(date.getMinutes());
          var seconds = padDate(date.getSeconds());
          return year+'-'+mouth+'-'+day+' '+hours+':'+minutes+':'+seconds;
        }
      },
      mounted: function(){
        // 声明一个变量指向Vue实例this，保证作用域一致
        var _this = this;
        this.timer = setInterval(
          function(){
            // 修改数据date
            _this.date = new Date();
          }, 1000
        );
      },
      beforeDestroy: function(){
        if(this.timer){
          // 在Vue实例销毁前，清楚我们的定时器
          clearInterval(this.timer);
        }
      }
    })
  </script>
</body>
</html>